<template>
	<view class="containers">
	  <view class="news-list" v-for="(item, index) in newsList" :key="index" @click="goDetail(item)">
	    <view class="news-user">
	      <view v-if="!rank" class="ranking-index" style="width: 24px;height: 24px;" :class="index === 0 ? 'ranking-one' : index === 1 ? 'ranking-two' : index === 2 ? 'ranking-three' : ''">
	        <text class="num">{{ index + 1 }}</text>
	      </view>
	      <view style="width: 24px;height: 24px;margin-left: 4px;">
	        <image class="user_avatar" :src="item.avatar" @error="onImageError(item)" />
	        <!-- <up-parse ref="upAvatarRef" :content="item.avatar"></up-parse> -->
	      </view>
	      <text class="user-name">{{ item.username }}</text>
	      <text style="background-color: rgba(0, 0, 0, 0.4);margin: 0 6px;width: 3px;height: 3px;"></text>
	      <text class="news-time">{{ dayjs.unix(item.dateline).format('YYYY-MM-DD HH:mm:ss')}}</text>
	    </view>
	    <text class="up-line-1 news-title">{{ item.fulltitle?item.fulltitle:item.title }}</text>
	    <view class="news-content">
	      <view class="content" :style="{width: item.attachment || item.pic ? 'calc(100% - 124px)' : '100%'}">
	        <up-parse :content="item.summary" :tagStyle="styleSummary"></up-parse>
	      </view>
          <image v-if="item.attachment||item.pic" style="width: 108px;height: 70px;" mode="" :src="item.pic ? item.pic : item.attachment"></image>
          <!-- <img v-if="newsType == '3' && item.attachment" style="width: 108px;height: 70px;" :src="item.attachment" alt=""> -->
        </view>
	  </view>
	</view>
</template>

<script setup lang="ts">
	import {ref, defineProps,defineEmits } from 'vue'
    import { useUserStore } from '@/stores'
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
    const styleSummary = {text: 'display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;'}
    const emits = defineEmits(['clickPage'])
    const userStore = useUserStore()
    import dayjs from 'dayjs'
    const props =  defineProps({
        newsList:{
            type: Array as () => any[],
            default: () => []
        },
        newsType:{
            type:String,
            default:'2'
        },
        rank:{
            type:Boolean,
            defult:false //由于先做的排名后做的子模块，故true不展示，false展示
        }
    })
    // 头像不能正常显示的时候显示默认图片
    const onImageError = (item: any) => {
        item.avatar = '/static/img/atvar.png'
    }
    //获取文章列表类型方法
    const getQueryParam =(url:any) => {
        const urlKey = url.split('?')[1]
        // console.log('urlKey->',urlKey)
        // const urlParams = new URLSearchParams(new URL(url).search);
        return urlKey;
    }
    const goDetail = (item:any)=>{
        console.log('ns->',props.newsType)
        // console.log(item)
        if(props.newsType == '1'){
            uni.navigateTo({
                url:`/pagesA/index/detail?mod=view&aid=${item.aid}`
            })
        }else if(props.newsType == '3'){
            uni.navigateTo({
                url:`/pagesA/index/detail?mod=viewthread&tid=${item.tid}`
            })
        }else{
            const detailType = getQueryParam(item.url)
            uni.navigateTo({
                url:`/pagesA/index/detail?${detailType}`
            })
        }
        // if(props.newsType == '1'){
        //     uni.navigateTo({
        //         url:`detail?tid=${item.aid}`
        //     })
        // }else{
        //     uni.navigateTo({
        //         url:`detail?tid=${item.tid}&newsType=${props.newsType}`
        //     })
            
        // }
        
        // emits('clickPage',item)
    }
    
</script>

<style lang="scss">
.containers {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'PingFang SC';
  // justify-content: center;
  .news-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 90%;
    border-bottom: 1px solid #F2F2F2;
    padding: 16px 0;
    .news-user {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      .user_avatar {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
      .ranking-index {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        line-height: 12px;
        /* 主色 */
        color: #2A65FF;
      }
      .ranking-one {
        background-image: url('/static/img/one.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        .num {
          margin-top: 4px;
        }
      }
      .ranking-two {
        background-image: url('/static/img/two.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        .num {
          margin-top: 4px;
        }
      }
      .ranking-three {
        background-image: url('/static/img/three.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        .num {
          margin-top: 4px;
        }
      }
      .user-name {
        line-height: 21px;
        letter-spacing: 0px;
        /* base/font/gy1 */
        color: rgba(0, 0, 0, 0.9);
        margin-left: 4px;
      }
      .news-time {
        line-height: 21px;
        letter-spacing: 0px;
        /* base/font/gy3 */
        color: rgba(0, 0, 0, 0.4);
      }
    }
    .news-title {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      margin-top: 8px;
    }
    .news-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      .content{
        width: calc(100% - 124px);
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
        /* base/font/gy2 */
        color: rgba(0, 0, 0, 0.6);
        text {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>